const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//利用HtmlWebpackPlugin生成全新的html文件
const { VueLoaderPlugin } = require('vue-loader')
const NODE_ENV = process.env.NODE_ENV
module.exports = {
  //运行在node环境下的js，按照common.js导出方法
  mode: NODE_ENV === 'develope' ? 'development' : 'production',
  entry: './src/index.js', //入口文件。绝对路径
  output: {
    //输出口文件
    publicPath: '/',
    filename: 'index.bundle.js', //文件名
    path: path.resolve(__dirname, 'dist'), //文件路径
    clean: true, //输出清文件
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    port: 9000,
  },
  module: {
    rules: [
      //打包图片文件设置
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

      //加载vue文件
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      //解析js文件
      {
        test: /\.m?js$/,
        exclude: /(node_modules|components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], //手动禁用ESM转换
          },
        },
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(less|css)$/i,

        use: ['vue-style-loader', 'style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      templateContent: `
      <html>
        <body>
          <div id="app">Hello World</div>
        </body>
      </html>`,
      title: '跳跳跳槽',
    }),
  ],
}
